<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户角色</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/animate.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTree/demo.css" type="text/css">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>用户角色管理</h5>
        </div>
        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <div class="example-wrap">
                        <div class="example">
                            <div style="margin-top: 10px;">
                                <button class="btn btn-info" id="addBut" type="button">新增角色</button>
                                <button type="button" class="btn btn-info" id="" onclick="location.reload();">
                                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 刷新
                                </button>
                            </div>
                            <table id="userRoleTab" class="table" data-height="660" data-click-to-select="true"
                                   data-mobile-responsive="true">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/js/content.min.js?v=1.0.0"></script>
<script src="${pageContext.request.contextPath}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${pageContext.request.contextPath}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${pageContext.request.contextPath}/js/plugins/layer/layer.min.js"></script>
<script src="${pageContext.request.contextPath}/js/zTree/jquery.ztree.core-3.5.min.js"></script>
<script src="${pageContext.request.contextPath}/js/zTree/jquery.ztree.all-3.5.js"></script>

<script type="text/javascript">
var $table = $('#userRoleTab');

$(function () {
    initTable();
    $("#addBut").click(function () {
        initRoleEdit(null);
    });
});

function initTable() {
    $table.bootstrapTable({
        url: '../role/getRolesPage.htm',
        dataType: "json",
        pagination: true, //分页
        striped: true,
        pageSize: 10,
        pageNumber: 1,
        queryParamsType: 'limit',
        smartDisplay: true,
        sidePagination: "server",
        columns: [
            {
                title: "角色名称",
                field: "roleName",
                align: 'center',
                valign: 'middle'
            },
            {
                title: "角色描述",
                field: "descr",
                align: 'center',
                valign: 'middle'
            },
            {
                title: "操作",
                field: "id,descr",
                align: 'center',
                formatter: function (value, row, index) {
                	if(row.roleName == 'root' || row.roleName == 'admin'){
                		var a = '';
                		<shiro:hasRole name="root">
                			a += '<button class="btn btn-sm btn-primary" type="button" onclick="showConsume(\'' + row.id + '\',\'' + row.roleName + '\')"><i class="fa fa-edit"></i> 权限管理</button>' 
                		</shiro:hasRole>
                		return a;
                	}else{
                		var p = '<button class="btn btn-sm btn-primary" type="button" onclick="showConsume(\'' + row.id + '\',\'' + row.roleName + '\')"><i class="fa fa-edit"></i> 权限管理</button> ';
                    	var e = '<button class="btn btn-sm btn-info" type="button" onclick="initRoleEdit(\'' + row.id + '\')"><i class="fa fa-edit"></i> 编辑</button> ';
                    	var d = '<button class="btn btn-sm btn-danger" type="button" onclick="deleteUserRole(\'' + row.id + '\',\'' + row.descr + '\')"><i class="fa fa-trash-o"></i> 删除</button> ';
                		return e + p + d;
                	}
                }
            }
        ]
    });
}

function deleteUserRole(roleId, roleName) {
    layer.confirm('你确定要删除【' + roleName + '】角色吗？', {
        btn: ['删除', '取消'] //按钮
    }, function () {
        //删除角色
        $.ajax({
            url: "../role/delRoleInfo.htm",
            cache: false,
            type: "get",
            dataType: "json",
            data: {id: roleId},
            success: function (result) {
                if (result.status == 0) {
                    layer.msg(result.message, {icon: 1});
                    $table.bootstrapTable('refresh', {url: '../role/getRolesPage.htm'});
                    return;
                }
                layer.msg(result.message, {icon: 2});
            }
        });
    }, function () {
    });
}

//编辑角色
function initRoleEdit(roleId) {
    var title;
    if (roleId){
        title = '编辑权限';
    }else{
        title = '新增角色';
    }
    layer.open({
        type: 2,
        title: title,
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['400px' , '600px'],
        content: '../role/updateUserRole.htm?id='+roleId,
        success: function(layero, index){
        }
    });
}

//权限配置
function showConsume(roleId,roleName){
    layer.open({
        type: 2,
        title: '权限配置',
        maxmin: true,
        shadeClose: true, //点击遮罩关闭层
        area : ['400px' , '720px'],
        content: '../role/sysrole_permission.htm?id='+roleId+'&roleName='+roleName,
        success: function(layero, index){}
    });
}
</script>
</body>
</html>
